<template>
  <div ref="container"></div>
</template>

<script>
import G6 from '@antv/g6'

export default {
  mounted() {
    const data = {
      nodes: [
        {
          id: 'node1',
          label: 'Node 1',
          type: 'rect',
          size: [120, 50],
          style: {
            fill: '#e6f7ff',
            stroke: '#1890ff',
            lineWidth: 2,
          },
        },
        {
          id: 'node2',
          label: 'Node 2',
          type: 'ellipse',
          size: [120, 50],
          style: {
            fill: '#f0f5ff',
            stroke: '#1890ff',
            lineWidth: 2,
          },
        },
        {
          id: 'node3',
          label: 'Node 3',
          type: 'diamond',
          size: [120, 50],
          style: {
            fill: '#e6f7ff',
            stroke: '#1890ff',
            lineWidth: 2,
          },
        },
        {
          id: 'node4',
          label: 'Node 4',
          type: 'rect',
          size: [120, 50],
          style: {
            fill: '#f0f5ff',
            stroke: '#1890ff',
            lineWidth: 2,
          },
        },
      ],
      edges: [
        {
          source: 'node1',
          target: 'node2',
          label: 'Edge 1',
          style: {
            stroke: '#1890ff',
            lineWidth: 2,
          },
        },
        {
          source: 'node2',
          target: 'node3',
          label: 'Edge 2',
          style: {
            stroke: '#1890ff',
            lineWidth: 2,
          },
        },
        {
          source: 'node3',
          target: 'node4',
          label: 'Edge 3',
          style: {
            stroke: '#1890ff',
            lineWidth: 2,
          },
        },
      ],
    }

    const graph = new G6.Graph({
      container: this.$refs.container,
      width: 800,
      height: 600,
      modes: {
        default: ['drag-canvas', 'zoom-canvas'],
      },
      layout: {
        type: 'dagre',
        rankdir: 'LR',
        align: 'UL',
        nodesep: 50,
        ranksep: 50,
      },
      defaultNode: {
        shape: 'rect',
        labelCfg: {
          style: {
            fill: '#000000',
            fontSize: 14,
          },
        },
      },
      defaultEdge: {
        shape: 'polyline',
        labelCfg: {
          style: {
            fill: '#000000',
            fontSize: 14,
          },
        },
      },
      nodeStateStyles: {
        hover: {
          stroke: '#1890ff',
          lineWidth: 2,
        },
      },

      edgeStateStyles: {
        hover: {
          stroke: '#1890ff',
          lineWidth: 2,
        },
      },
    })

    graph.data(data)
    graph.render()
  },
}
</script>
